<template>
    <div v-if="query.length > 0" class="page-card">
        <!-- 搜索条件表单 -->
        <el-form :inline="true">
            <template v-for="(item, index) in query">
                <el-form-item :label="item.label" style="margin-right: 30px;">
                    <!-- input -->
                    <el-input v-if="item.type == 'input'" v-model="queryForm[item.key]"
                        :placeholder="item.placeholder || '请输入'"></el-input>

                    <!-- select -->
                    <el-select v-if="item.type == 'select'" v-model="queryForm[item.key]"
                        :placeholder="item.placeholder || '请选择'">
                        <el-option v-for="(OptionsItem, OptionsIndex) in item.options" :key="OptionsIndex"
                            :label="OptionsItem[item.labelKey || 'label']"
                            :value="OptionsItem[item.valueKey || 'value']"></el-option>
                    </el-select>

                    <!-- 级联选择器 -->
                    <el-cascader v-if="item.type == 'cascader'" v-model="queryForm[item.key]" :options="item.options"
                        @change="handleChange"></el-cascader>

                    <!-- date -->
                    <el-date-picker v-if="item.type == 'date'" v-model="queryForm[item.key]" type="date"
                        :value-format="(item.valueFormat || 'yyyy-MM-dd')" :placeholder="item.placeholder || '选择日期'">
                    </el-date-picker>

                    <!-- 日期范围选择 -->
                    <el-date-picker v-if="item.type == 'daterange'" v-model="queryForm[item.key]" type="daterange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>

                    <!-- time -->
                    <el-time-select v-if="item.type == 'time'" v-model="queryForm[item.key]"
                        :picker-options="item.options || pickerOptions" :placeholder="item.placeholder || '选择时间'">
                    </el-time-select>
                </el-form-item>
            </template>
            <el-form-item>
                <el-button type="success" @click="getList">查询</el-button>
                <el-button type="info" @click="onReset(queryForm)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="page-card">
        <!-- 数据表格 -->
        <el-table :data="state.dataList" v-loading="loading">
            <template v-for="(item, index) in columns">

                <!-- 用户昵称和头像 -->
                <el-table-column v-if="item.type == 'user'" :label="item.title" :width="item.width || ''"
                    :align="item.align || 'left'">
                    <template #default="{ row }">
                        <div class="user-wrap">
                            <el-avatar :size="40" :src="row.userInfo.avatar" shape="square" />
                            <span class="nickname">{{ row.userInfo.nickname }}</span>
                        </div>
                    </template>
                </el-table-column>

                <!-- 单张图片 -->
                <el-table-column v-else-if="item.type == 'image'" :label="item.title" :width="item.width || ''"
                    :align="item.align">
                    <template #default="{ row }">
                        <el-avatar shape="square" :size="50" :src="row[item.key]" />
                    </template>
                </el-table-column>

                <!-- 图片集合 -->
                <el-table-column v-else-if="item.type == 'image_array'" :label="item.title" :width="item.width || ''"
                    :align="item.align">
                    <template #default="{ row }">
                        <div class="images-wrap-preview" v-if="row[item.key].length > 0">
                            <el-image class="images-wrap-item" :src="imgPath(row[item.key][0])"
                                :preview-src-list="imgArrayPath(row[item.key])" fit="cover" hide-on-click-modal
                                preview-teleported />
                            <div class="images-preview-tag" v-if="row[item.key].length > 1">+{{ row[item.key].length }}
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <!-- 字典类型数据，如状态 -->
                <el-table-column v-else-if="item.type == 'dict'" :label="item.title" :width="item.width || '100'"
                    :align="item.align">
                    <template #default="{ row }">
                        <span>{{ item.options[row[item.key]] }}</span>
                    </template>
                </el-table-column>

                <!-- 日期 -->
                <el-table-column v-else-if="item.type == 'date'" :prop="item.key" :label="item.title" width="170"
                    :formatter="formatDate" align="center">
                </el-table-column>

                <!-- 操作列 -->
                <el-table-column v-else-if="item.type == 'operation'" :label="item.title" :width="item.width || '150'"
                    align="center">
                    <template #default="rowData">
                        <el-button @click="$emit('onOperation', { rowData, ...operatItem })"
                            v-for="(operatItem, operatIndex) in item.options" :key="operatIndex" :type="operatItem.type"
                            link>{{
                                operatItem.title
                            }}</el-button>
                    </template>
                </el-table-column>

                <!-- 常规列 -->
                <el-table-column v-else :prop="item.key" :label="item.title" :width="item.width || ''"
                    :align="item.align || 'left'" show-overflow-tooltip />
            </template>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrap">
            <el-pagination class="mt20" v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
                :page-count="page.pageCount" :total="page.dataTotal" @current-change="getList" background
                :page-sizes="[10, 20, 50, 100]" @size-change="sizeChange"
                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { reset, formatDate, imgPath, imgArrayPath } from '@/utils'


const props = defineProps({
    api: {
        type: Function
    },
    columns: {
        type: Array,
        default: []
    },
    query: {
        type: Array,
        default: []
    }
})

const page = reactive({
    currentPage: 1,
    pageSize: 10,
    pageCount: 0,
    dataTotal: 0
});

let queryForm = reactive({})

const loading = ref(false)
const state = reactive({
    dataList: []
})

const emits = defineEmits(["onOperation"])
onMounted(() => {
    getList()
})

const getList = () => {
    loading.value = true;
    props.api({
        page: page.currentPage,
        pageSize:page.pageSize,
        queryForm
    }).then(res => {
        state.dataList = res.result.data;
        page.pageCount = res.result.last_page;
        page.dataTotal = res.result.total;

        loading.value = false;
    })
}

function onReset(data) {
    page.currentPage = 1;
    reset(data)
    getList();
}

function sizeChange(val) {
    page.currentPage = 1;
    page.pageSize = val;
    getList();
}

defineExpose({
    getList
})
</script>
<style lang="scss" scoped>
.pagination-wrap {
    display: flex;
    justify-content: flex-end;
}

:deep(.el-form-item) {
    margin-bottom: 10px;
    margin-top: 10px;
}

.user-wrap {
    display: flex;
    align-items: center;

    .nickname {
        margin-left: 5px;
    }
}


.images-wrap-preview {
    margin-left: 5px;
    position: relative;

    .images-wrap-item {
        width: 80px;
        height: 80px;
    }

    .images-preview-tag {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #409eff;
        color: #fff;
        line-height: 1;
        padding: 5px;
    }
}
</style>